define(function(require,exports,module){
   'use strict';

    var React = require('react');
    var Highcharts = require('highcharts');

    module.exports = React.createClass({
        getInitialState:function(){
            return {
                url:this.props.url,
                ajax_data:this.props.ajax_data,
                category:[],
                serias:[]
            };
        },
        componentDidMount:function(){
            var url = this.state.url;
            var data = this.props.ajax_data;

            var options = {
                colors: [
                    '#058DC7',
                    '#50B432',
                    '#ED561B',
                    '#DDDF00',
                    '#24CBE5',
                    '#64E572',
                    '#FF9655',
                    '#FFF263', 
                    '#6AF9C4'
                ], 
                chart: {
                    renderTo: this.props.id,
                    type: 'areaspline'
                },
                title: {
                    text: this.props.title
                },
                subtitle: {
                    text: this.props.description
                },
                xAxis: {
                    categories: this.state.category
                },
                yAxis: {
                    title: {
                        text: this.props.y
                    },
                    labels: {
                        formatter: function () {
                            return this.value / 1000 + 'k';
                        }
                    }
                },
                tooltip: {
                    formatter:function(){
                        return '【'+this.x+'】'+ this.series.name + ':' + Highcharts.numberFormat(this.y,'0','.',',');
                    },
                    crosshairs: true,
                },
                plotOptions: {
                    areaspline: {
                        fillOpacity: 0.5
                    }
                },
                series: [{
                    name: this.props.title,
                    data: this.state.serias
                }]
            };
            var chart = new Highcharts.Chart(options);

            var get_ajax_data = function(){
                $.ajax({
                    url:url,
                    data:data,
                    type:'post',
                    dataType:'json',
                    success:function(o){
                        
                        var category = [],series = [];

                        if(o.length > 0){
                            o.map(function(item){
                                category.push(''+item.name);
                                series.push(item.value);
                            });
                        }
                        var chart = new Highcharts.Chart(options); 
                        chart.series[0].setData(series,true);
                        chart.xAxis[0].setCategories(category);
                        chart.redraw();
                    },
                    error:function(xhr,status,err){
                        console.error('获取数据失败!',status,err.toString());
                    }
                });
            };

            get_ajax_data();
            setInterval(get_ajax_data,this.props.interval ? this.props.interval : 500000);
        },
        render:function(){
            return (
                <div className={this.props.className} id={this.props.id}></div>
            );
        }
    });
});